<template>
  <div class="app-container">
    <vxe-row :gutter="10" class="mb8">
      <vxe-col :span="1.5">
        <el-button
      
            @click="handleAdd"
        >新增</el-button>
      </vxe-col>
      <vxe-col :span="1.5">
        <el-button
         
          plain
          @click="translation"
        >打印</el-button>
      </vxe-col>
     
    </vxe-row>
    <right-toolbar @queryTable="getList"></right-toolbar>
    <vxe-table :data="tableData.list">
      <vxe-table-column width="100" label="状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="apply_state" :value="scope.row.state" />
        </template>
      </vxe-table-column>
      <vxe-table-column title="编号"  prop="number" >
        <template #default="scope">
          <vxe-button style="margin-right: 6px;" link type="primary"
                     size="small"
                     @click="handleDetail(scope.row)"
          >{{ scope.row.number }}</vxe-button>
        </template>
      </vxe-table-column>

      <vxe-table-column title="转入公司" prop="companyName"></vxe-table-column>
      <vxe-table-column title="转入管理员" prop="adminName"></vxe-table-column>
      <vxe-table-column title="数量" prop="num"></vxe-table-column>
      <vxe-table-column title="申请人" prop="createUserName"></vxe-table-column>
      <vxe-table-column title="备注" prop="remark"></vxe-table-column>

      <vxe-table-column title="操作" align="center" class-name="small-padding fixed-width">
        <template  #default="scope">

          <vxe-button style="margin-right: 10px;" link type="primary"
                   size="small" v-if="scope.row.state === 0 || scope.row.state === 3"
                   @click="handleSub(scope.row)"
          >提交</vxe-button>

          <vxe-button style="margin-right: 10px;" link type="primary"
            size="small" v-if="scope.row.state === 0 || scope.row.state === 3"
            @click="handleUpdate(scope.row)"
          >修改</vxe-button>
          <vxe-button v-if="scope.row.state === 0 || scope.row.state === 3"
              size="small" link type="primary"
              @click="handleDelete(scope.row)"
          >删除</vxe-button>

        </template>
      </vxe-table-column>
    </vxe-table>
<div class="pagination-container">
  <pagination
        v-show="tableData.paging.total>0"
        :total="tableData.paging.total"
        v-model:page="tableData.paging.pageNum"
        v-model:limit="tableData.paging.pageSize"
        @pagination="getList"
    />
</div>
   

    <print-dialog ref="printDialog" @sub="getList"></print-dialog>
    <edit :apply-type="applyType" ref="edit" @sub="getList"></edit>

    <detail ref="detailDialog"></detail>
  </div>

</template>
<script setup>
import api from "./api.js";
import Edit from './edit.vue'
import Detail from "@/components/Asset/ApplyDetailDialog/index";
import PrintDialog from './PrintDialog.vue'
const edit = ref();

const printDialog = ref();

const detailDialog = ref();

const { proxy } = getCurrentInstance();
const { apply_state } = proxy.useDict("apply_state");

// 申请类型
const applyType = ref('ZCDB');

const queryParams = reactive({
  applyType: applyType.value,
});

const tableData = reactive({
  loading: false,
  list: [], // 表格列表数据
  paging: {
    total: 0, // 总条数
    pageNum: 1,
    pageSize: 10,
  }
});

function getList() {
  tableData.loading = true;
  const {pageNum, pageSize} = tableData.paging;

  const query = {...queryParams};
  const pageReq = { page: pageNum - 1, size: pageSize };
  api.list(query, pageReq).then(response => {
    const { content, totalElements } = response
    if (content && content.length > 0) {
      content.forEach(item => {
        if (item.formData) {
          let formData = JSON.parse(item.formData);
          Object.assign(item, formData);
        }
      })
    }

    tableData.list = content;
    tableData.paging.total = totalElements;
    tableData.loading = false;
  });
}

function handleAdd() {
  edit.value.open();
}

function handleUpdate(row) {
  edit.value.open(row);
}
function translation() {
  printDialog.value.open();
}

function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除').then(function() {
    return api.del(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

function handleSub(row) {
  api.sub(row.id).then(()=> {
    this.getList();
  });
}

onMounted(()=> {
  getList()
})

</script>
  
<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 92vh; 
  overflow: hidden; 
}

.vxe-table {
  flex: 1;
  overflow: auto;
}

.pagination-container {
  display: flex;
  justify-content: flex-end; 

}
</style>